<template>
    <div class="com">
        <div class="ad">
            <van-image src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/49601/16/12206/115887/5d91b4d5E34709952/aba2bcb4855e6e52.png!q70.jpg"/>
            <van-image src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/32449/33/15631/174497/5cc2d86bE0289110c/9c53e25651659d43.png!q70.jpg"/>
        </div>
        <van-image src='https://m.360buyimg.com/mobilecms/s750x100_jfs/t1/111655/4/10853/142323/5ef22455Eb86abfc1/2bf122bb2e87d6e3.png.webp' />
        <van-image src='//m.360buyimg.com/mobilecms/s750x80_jfs/t1/118793/9/10620/23804/5ef008fbE5d9a21ec/55f3eb03ac9e05a4.png!q70.jpg' />
        <van-grid :column-num="4" icon-size="60px">
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
          <van-grid-item>
            <strong class="m_r_g_title">免息星球</strong>
            <p class="m_r_g_p">白条免息购</p>
            <van-image src="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg" />
          </van-grid-item>
        </van-grid>
    </div>
</template>

<style lang="scss" scoped>
.ad{
    padding:8px 8px;
    display: flex;
    .van-image{
        flex: 1;
    }
}
.m_r_g_title {
    background: -webkit-linear-gradient(left,#FF2A2A,#F139D2);
    background: linear-gradient(90deg, #FF2A2A,#F139D2);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 18px;
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
